<template>
  <div class="mainview">
    <div class="mguanyu">
      <span>关于</span>
    </div>

    <img :src="singerdetail.cover" alt="" />
    <div class="userintroduce">
      <div class="name">{{singerdetail.name}}</div>
      <div class="introduce">
          <span>
{{singerdetail.briefDesc}}
          </span>
        
      </div>
    </div>
  </div>
</template>

<script>
import {get} from '@/http/request.js'
export default {
    // props:['singerdetail'],
    data(){
        return {
        singerdetail:null
        }
    },
    mounted(){
        console.log(this.$route.query.id,this.singerdetail);
         // 获取歌手详情

        get(`/artist/detail?id=${this.$route.query.id}`).then(res=>{
            console.log(res.data.data.artist);
            this.singerdetail=res.data.data.artist
        })
    }
};
</script>

<style lang="scss" scoped>

.mainview {
  width: 690rem;
  margin: 0 auto;
  margin-top: 50rem;
  position: relative;
  .mguanyu {
    width: 690rem;
    display: flex;
    justify-content: start;
    align-items: center;

    span {
      text-align: left;
      font-size: 37rem;
      color: #6a6a6a;
      font-weight: 600;
    }
  }
  img {
    width: 690rem;
    height: 690rem;
    border-radius: 15rem;
    margin-top: 25rem;

  }
  .userintroduce{
      width: 620rem;
      position: absolute;
      bottom: 40rem;
      left: 35rem;
      color: #fff;
      .name{
          text-align: left;
          font-size: 40rem;
          font-weight: 700;

      }
      .introduce{
          width: 620rem;
          font-weight: 500;
          text-align: left;
          font-size: 25rem;
          height: 50rem;
          overflow: hidden;
          text-overflow: ellipsis;
        //   white-space: nowrap;
          -webkit-line-clamp: 3;


text-overflow: ellipsis;


display: -webkit-box;



-webkit-box-orient: vertical;

          span{
              
              text-overflow: ellipsis;
              overflow: hidden;
              
              

          }
          

  
}
}
}
</style>
